<template>
    <div>

        <el-card class="box-card minHeight400px">
            <div slot="header" class="clearfix rowSpaceBetweenAlignCenter">
                <div class="noselect cursorPointer" @click="$router.go(-1)">
                    <i class="el-icon-back"></i>
                    <span>{{ $route.query.action === 'add' ? '新增用户' : '编辑用户' }}</span>
                </div>
            </div>
            
            <div class="paddingTop20">
                <el-form label-position="right" label-width="80px" :model="info">
                    <el-form-item label="用户名">
                        <el-input v-model="info.u" placeholder="请输入用户名"></el-input>
                    </el-form-item>

                    <el-form-item label="登录密码" v-if="$route.query.action == 'add'">
                        <el-input v-model="info.p" placeholder="请输入登录密码" type="password"></el-input>
                    </el-form-item>

                    <el-form-item label="登录密码" v-if="$route.query.action != 'add'">
                        <el-input v-model="info.p" placeholder="请输入登录密码" type="password" :disabled="info.keep">
                            <template slot="prepend">
                                <label class="rowStartAlignCenter noselect">
                                    <el-checkbox v-model="info.keep" @change="whenKeepChanged">保持旧密码</el-checkbox>
                                </label>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                </el-form>
            </div>

            <div class="paddingTop20 rowCenter">
                <el-button type="primary" size="small" class="paddingRow30" @click="clickSubmit">{{ $route.query.action == 'add' ? '新增' : '更新' }}</el-button>
            </div>
            

        </el-card>

       

        
    </div>
</template>



<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import { watch } from 'vue'
import { apiAddUsers, apiEditUsers } from '@/api/admin'
export default {
    data() {
        return {
            mode: 'add',
            info: {
                id: null,
                u: '',
                p: '',
                keep: true
            },
            
        }
    },
    computed: {

    },
    watch: {

    },
    methods: {
        judgeAction () {
            switch (this.$route.query.action) {
                case 'add':

                    break;

                case 'edit':
                    this.mode = 'edit'
                    this.info.id = this.$route.query.id
                    this.info.u = this.$route.query.u
                    break;

                default:
                    this.fn.alertAndBack('未知操作')
                    break;
            }
        },

        clickSubmit () {
            this.fn.clog('clickSubmit()')
            let info = this.info
            if (info.u === '') { return this.fn.eWarning('请输入用户名') }
            // if (info.p === '') { return this.fn.eWarning('请输入登录密码') } // 允许空密码
            switch (this.$route.query.action) {
                case 'add':
                    apiAddUsers(info).then(res => {
                        this.fn.clogJsons(res)
                        if (res.code == 1) {
                            this.fn.alertAndBack('添加成功', 'success')
                        } else {
                            this.fn.eWarning(res.msg)
                        }
                    }).catch(e => {
                        this.fn.clogJsons(e)
                        this.fn.eError(e)
                    })
                    break;

                case 'edit':
                    apiEditUsers(info).then(res => {
                        this.fn.clogJsons(res)
                        if (res.code == 1) {
                            this.fn.alertAndBack('更新成功', 'success')
                        } else {
                            this.fn.eWarning(res.msg)
                        }
                    }).catch(e => {
                        this.fn.clogJsons(e)
                        this.fn.eError(e)
                    })
                    break;

                default:
                    break;
            }
        },


        whenKeepChanged (e) {
            this.fn.clog('是否保持旧密码: ', e, this.info.keep)
            if (this.info.keep) {
                // 保持
                this.info.p = ''
            }
        }

    },
    mounted() {
        this.judgeAction()
    }
}
</script>